<template>
  <div class="status-overview-panel">
    <a-row :gutter="16">
      <!-- 生命周期状态 -->
      <a-col :span="6">
        <a-card size="small" class="status-card">
          <template #title>
            <div class="card-title">
              <IconifyIcon icon="ant-design:clock-circle-outlined" />
              <span>生命周期</span>
            </div>
          </template>
          <div class="status-content">
            <a-tag :color="getLifecycleColor(status.lifecycle)" size="large">
              {{ getLifecycleLabel(status.lifecycle) }}
            </a-tag>
            <a-button
              type="link"
              size="small"
              @click="openStatusModal('lifecycle')"
            >
              修改
            </a-button>
          </div>
        </a-card>
      </a-col>

      <!-- 可用性状态 -->
      <a-col :span="6">
        <a-card size="small" class="status-card">
          <template #title>
            <div class="card-title">
              <IconifyIcon icon="ant-design:check-circle-outlined" />
              <span>可用性</span>
            </div>
          </template>
          <div class="status-content">
            <a-tag
              :color="getAvailabilityColor(status.availability)"
              size="large"
            >
              {{ getAvailabilityLabel(status.availability) }}
            </a-tag>
            <a-button
              type="link"
              size="small"
              @click="openStatusModal('availability')"
            >
              修改
            </a-button>
          </div>
        </a-card>
      </a-col>

      <!-- 版本状态 -->
      <a-col :span="6">
        <a-card size="small" class="status-card">
          <template #title>
            <div class="card-title">
              <IconifyIcon icon="ant-design:version-outlined" />
              <span>版本</span>
            </div>
          </template>
          <div class="status-content">
            <a-tag :color="getVersionColor(status.version)" size="large">
              {{ getVersionLabel(status.version) }}
            </a-tag>
            <a-button
              type="link"
              size="small"
              @click="openStatusModal('version')"
            >
              修改
            </a-button>
          </div>
        </a-card>
      </a-col>

      <!-- 自定义状态 -->
      <a-col :span="6">
        <a-card size="small" class="status-card">
          <template #title>
            <div class="card-title">
              <IconifyIcon icon="ant-design:setting-outlined" />
              <span>业务状态</span>
            </div>
          </template>
          <div class="status-content">
            <a-tag
              v-if="status.custom"
              :color="getCustomColor(status.custom.statusCode)"
              size="large"
            >
              {{ status.custom.statusName }}
            </a-tag>
            <a-tag v-else color="default" size="large">未设置</a-tag>
            <a-button
              type="link"
              size="small"
              @click="showStatusModal('custom')"
            >
              {{ status.custom ? '修改' : '设置' }}
            </a-button>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 状态统计信息 -->
    <a-row :gutter="16" style="margin-top: 16px">
      <a-col :span="24">
        <a-card size="small" title="状态统计">
          <a-row :gutter="16">
            <a-col :span="6">
              <a-statistic
                title="状态变更次数"
                :value="statistics.changeCount"
                :value-style="{ color: '#3f8600' }"
              />
            </a-col>
            <a-col :span="6">
              <a-statistic
                title="活跃订阅"
                :value="statistics.activeSubscriptions"
                :value-style="{ color: '#1890ff' }"
              />
            </a-col>
            <a-col :span="6">
              <a-statistic
                title="待处理事件"
                :value="statistics.pendingEvents"
                :value-style="{ color: '#faad14' }"
              />
            </a-col>
            <a-col :span="6">
              <a-statistic
                title="最后更新"
                :value="formatTime(status.lastUpdated)"
                :value-style="{ color: '#666' }"
              />
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>

    <!-- 状态修改模态框 -->
    <a-modal
      :open="modalVisible"
      :title="getStatusModalTitle()"
      @ok="updateStatus"
      @cancel="modalVisible = false"
    >
      <a-form layout="vertical">
        <a-form-item label="新状态">
          <a-select
            v-model:value="selectedStatus"
            placeholder="选择新状态"
            style="width: 100%"
          >
            <a-select-option
              v-for="option in statusOptions"
              :key="option.value"
              :value="option.value"
            >
              {{ option.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="变更原因">
          <a-textarea
            v-model:value="statusReason"
            placeholder="请输入状态变更原因"
            :rows="3"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { IconifyIcon } from '@vben/icons';

// Props
interface Props {
  resourceId: string;
  resourceType: string;
}

const props = defineProps<Props>();

// Emits
const emit = defineEmits<{
  statusChange: [changeInfo: any]
}>();

// 响应式数据
const modalVisible = ref(false);
const currentStatusType = ref<
  'lifecycle' | 'availability' | 'version' | 'custom'
>('lifecycle');
const selectedStatus = ref('');
const statusReason = ref('');

// 状态数据
const status = reactive({
  lifecycle: 'ACTIVE',
  availability: 'AVAILABLE',
  version: 'ACTIVE',
  custom: {
    statusCode: 'APPROVED',
    statusName: '已审核',
  },
  lastUpdated: new Date(),
});

// 统计信息
const statistics = reactive({
  changeCount: 15,
  activeSubscriptions: 3,
  pendingEvents: 2,
});

// 计算属性
const statusOptions = computed(() => {
  switch (currentStatusType.value) {
    case 'lifecycle':
      return [
        { label: '草稿', value: 'DRAFT' },
        { label: '活跃', value: 'ACTIVE' },
        { label: '暂停', value: 'SUSPENDED' },
        { label: '归档', value: 'ARCHIVED' },
      ];
    case 'availability':
      return [
        { label: '可用', value: 'AVAILABLE' },
        { label: '已预订', value: 'RESERVED' },
        { label: '使用中', value: 'IN_USE' },
        { label: '不可用', value: 'UNAVAILABLE' },
        { label: '故障', value: 'FAILED' },
      ];
    case 'version':
      return [
        { label: '草稿', value: 'DRAFT' },
        { label: '已暂存', value: 'STAGED' },
        { label: '金丝雀', value: 'CANARY' },
        { label: '活跃', value: 'ACTIVE' },
        { label: '已废弃', value: 'DEPRECATED' },
        { label: '已回滚', value: 'ROLLED_BACK' },
      ];
    case 'custom':
      return [
        { label: '待审核', value: 'PENDING_REVIEW' },
        { label: '已审核', value: 'APPROVED' },
        { label: '已拒绝', value: 'REJECTED' },
        { label: '已激活', value: 'ACTIVE' },
        { label: '已暂停', value: 'SUSPENDED' },
        { label: '已归档', value: 'ARCHIVED' },
      ];
    default:
      return [];
  }
});

// 方法
const openStatusModal = (
  type: 'lifecycle' | 'availability' | 'version' | 'custom',
) => {
  currentStatusType.value = type;
  selectedStatus.value = '';
  statusReason.value = '';
  modalVisible.value = true;
};

const updateStatus = async () => {
  if (!selectedStatus.value) {
    message.warning('请选择新状态');
    return;
  }

  try {
    // 更新状态
    switch (currentStatusType.value) {
      case 'lifecycle':
        status.lifecycle = selectedStatus.value;
        break;
      case 'availability':
        status.availability = selectedStatus.value;
        break;
      case 'version':
        status.version = selectedStatus.value;
        break;
      case 'custom':
        const customLabels: Record<string, string> = {
          PENDING_REVIEW: '待审核',
          APPROVED: '已审核',
          REJECTED: '已拒绝',
          ACTIVE: '已激活',
          SUSPENDED: '已暂停',
          ARCHIVED: '已归档',
        };
        status.custom = {
          statusCode: selectedStatus.value,
          statusName:
            customLabels[selectedStatus.value] || selectedStatus.value,
        };
        break;
    }

    status.lastUpdated = new Date();
    statistics.changeCount++;

    // 触发状态变更事件
    emit('statusChange', {
      type: currentStatusType.value,
      newStatus: selectedStatus.value,
      reason: statusReason.value,
      timestamp: new Date(),
    });

    message.success('状态更新成功');
    modalVisible.value = false;
  } catch (error) {
    message.error('状态更新失败');
  }
};

const getStatusModalTitle = () => {
  const titles = {
    lifecycle: '修改生命周期状态',
    availability: '修改可用性状态',
    version: '修改版本状态',
    custom: '修改自定义状态',
  };
  return titles[currentStatusType.value];
};

// 状态标签和颜色
const getLifecycleColor = (lifecycle: string) => {
  const colors: Record<string, string> = {
    DRAFT: 'default',
    ACTIVE: 'green',
    SUSPENDED: 'orange',
    ARCHIVED: 'red',
  };
  return colors[lifecycle] || 'default';
};

const getLifecycleLabel = (lifecycle: string) => {
  const labels: Record<string, string> = {
    DRAFT: '草稿',
    ACTIVE: '活跃',
    SUSPENDED: '暂停',
    ARCHIVED: '归档',
  };
  return labels[lifecycle] || lifecycle;
};

const getAvailabilityColor = (availability: string) => {
  const colors: Record<string, string> = {
    AVAILABLE: 'green',
    RESERVED: 'blue',
    IN_USE: 'orange',
    UNAVAILABLE: 'red',
    FAILED: 'red',
  };
  return colors[availability] || 'default';
};

const getAvailabilityLabel = (availability: string) => {
  const labels: Record<string, string> = {
    AVAILABLE: '可用',
    RESERVED: '已预订',
    IN_USE: '使用中',
    UNAVAILABLE: '不可用',
    FAILED: '故障',
  };
  return labels[availability] || availability;
};

const getVersionColor = (version: string) => {
  const colors: Record<string, string> = {
    DRAFT: 'default',
    STAGED: 'blue',
    CANARY: 'orange',
    ACTIVE: 'green',
    DEPRECATED: 'red',
    ROLLED_BACK: 'red',
  };
  return colors[version] || 'default';
};

const getVersionLabel = (version: string) => {
  const labels: Record<string, string> = {
    DRAFT: '草稿',
    STAGED: '已暂存',
    CANARY: '金丝雀',
    ACTIVE: '活跃',
    DEPRECATED: '已废弃',
    ROLLED_BACK: '已回滚',
  };
  return labels[version] || version;
};

const getCustomColor = (statusCode: string) => {
  const colors: Record<string, string> = {
    PENDING_REVIEW: 'orange',
    APPROVED: 'green',
    REJECTED: 'red',
    ACTIVE: 'blue',
    SUSPENDED: 'purple',
    ARCHIVED: 'default',
  };
  return colors[statusCode] || 'default';
};

const formatTime = (timestamp: Date) => {
  return timestamp.toLocaleString('zh-CN');
};

// 初始化
onMounted(() => {
  // 这里可以加载实际的资源状态数据
});
</script>

<style lang="less" scoped>
.status-overview-panel {
  .status-card {
    .card-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 500;
    }

    .status-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;

      .ant-tag {
        margin: 0;
        font-size: 14px;
        padding: 4px 12px;
      }
    }
  }
}
</style>
